/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    AlertIOS,
} from 'react-native';

//ES5的写法
var pressView = React.createClass({
    getInitialState(){
        return{
            title:'不透明触摸'
        }
    },

    render() {
        return (
            <View style={styles.container}>
                {/*不透明触摸事件,属性为透明度*/}
                {/*常用事件*/}
                <TouchableOpacity
                    activeOpacity={0.5}
                    onPress={()=>this.activeEvent('点击')}
                    onLongPress={()=>this.activeEvent('长按')}
                    onPressIn={()=>this.activeEvent('按下')}
                    onPressOut={()=>this.activeEvent('抬起')}
                >
                    <Text style={styles.welcome}>
                        点击事件
                    </Text>
                </TouchableOpacity>

                <View>
                    <Text>{this.state.title}</Text>
                </View>
            </View>
        );
    },

    activeEvent(event) {
        this.setState({
            title:event
        }),
        AlertIOS.alert(this.state.title)
    }
})


//ES6的写法
// class pressView extends Component {
//     render() {
//         return (
//             //<View style={styles.container} onPress={this.renderPress()}>
//             <View style={styles.container} onPress={()=>this.renderPress()}>
//                 {/*不透明触摸事件,属性为透明度*/}
//                 <TouchableOpacity activeOpacity={0.5}>
//                     <Text style={styles.welcome}>
//                         React-Native入门学习
//                     </Text>
//                 </TouchableOpacity>
//             </View>
//         );
//     }
//
//     renderPress(){
//         AlertIOS.alert('点击了')
//     }
// }

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome:{
        backgroundColor:'red'
    }
});

//输出类
module.exports = pressView;
